<template>
	<view>
		<view class="u-p-20 u-p-r-36 bg-white">
			<view class="search-body bg-white" @tap="$goTo('/pages/yuncang/search/index?type=2')">
				<text class="iconfont icon-sousuo u-m-r-20 u-font-28 c-primary"></text>
				<text class="u-font-26 c-regular">{{ $t('yuncang.请输入搜索的商品名称') }}</text>
			</view>
		</view>
		<view class="tabs bg-white u-flex u-flex-row u-flex-items-center u-p-20">
			<view class="tab e-flex-1 text-center" :class="{'on':tabIndex==0}" @click="tabIndex = 0">
				<text>仓库总量</text>
			</view>
			<view class="tab e-flex-1 text-center" :class="{'on':tabIndex==1}" @click="tabIndex = 1">
				<text>库存明细</text>
			</view>
		</view>
		<yuncangGoodsCard :showPickup="true" v-if="tabIndex == 0" :priceShow="false" :stock="$accAdd(item.stock, -item.stockSell)" :goods="item.params.product" v-for="item in list" :key="item.id"></yuncangGoodsCard>
		<view class="logs" v-if="tabIndex == 1">
			<view class="list">
				<view v-for="(item,i) in list" :key="i">
					<view class="u-p-30 bg-white" @click="toPickupDetail(item)">
						<view class="u-flex u-flex-row">
							<view class="u-flex u-flex-column flex-1 u-flex-items-start u-m-r-10">
								<text class="flex-1" style="font-size: 36rpx;">{{getProduct(item).name || "-"}}</text>
								<text class="flex-1" style="color: #999;">{{timeFormatter(new Date(item.createTime).getTime())}}</text>
							</view>
							<view :style="[{color:item.isout == '1' ? 'red' : '#666'}]" class="u-font-42" style="font-weight: bold;">
								<text>{{item.isout=='1'?'+':'-'}}</text>
								<text >{{item.cost}}</text>
							</view>
						</view>
						<view class="u-flex u-flex-row">
							<text class="" style="color: #999;" v-if="item.paycode && item.isout == '0'">查看提货详情</text>
						</view>
					</view>
					<view style="background-color: #f3f3f3;height: 1rpx;transform: scaleY(.3);"></view>
				</view>
			</view>
		</view>
		<load-more v-if="true" :showLoad="loadStatus == 'loading'"></load-more>
	</view>
</template>

<script>
import { getStockGoodsList,getStockOrderDetailApi } from 'api/yuncang.js'
import yuncangGoodsCard from './child/yuncang-goods-card.vue'
import {
		Debounce
	} from '@/common/utils/lib/tools'
import loadlistMixin from './mixins/loadlist.js'
export default {
	mixins:[loadlistMixin],
	components: {
		yuncangGoodsCard
	},
	data() {
		return {
			goodsList: [],
			showLoad: false,
			pageNum: 1,
			isGet: true,
			tabIndex:0,//0库存总量 1库存明细
			debounce_load:Debounce(()=>this.getGoodsList(),300)
		}
	},
	watch:{
		tabIndex:{
			handler(val){
				this.isGet = true
				this.goodsList = []
				// this.debounce_load()
				this.init()
			},
			immediate:true,
			deep:true
		}
	},
	// onLoad() {
		
	// },
	// onReachBottom() {
	// 	this.getGoodsList()
	// },
	// onShow() {
	// 	this.getGoodsList()
	// },
	methods: {
		timeFormatter(time){
			return uni.$timeFormat(time,'yyyy-mm-dd hh:MM:ss')
		},
		loadApi(config){
			let api = (params) => getStockGoodsList(params)
			let detailApi = (params) => getStockOrderDetailApi(params)
			if(this.tabIndex == 1) api = detailApi
			return api({
				pageNum:config.pageNum,
				pageSize:config.pageSize,
			}).then(res=>({
				data:{
					...res
				}
			})).finally(()=>{
				this.$forceUpdate()
			})
		},
		getProduct(obj){
			return obj.params?.product || {}
		},
		getGoodsList() {
			let api = (params) => getStockGoodsList(params)
			let detailApi = (params) => getStockOrderDetailApi(params)
			
			if (this.isGet && !this.showLoad) {
				let data = {
					pageNum: this.pageNum,
					pageSize: 10
				}
				this.showLoad = true
				if(this.tabIndex == 1) api = detailApi
				api(data).then(res => {
					this.showLoad = false
					if (res.code == 200) {
						// debugger
						// let loadRes = this.$pageLoad(this.goodsList, res.rows, this.pageNum, 10,false)
						// this.goodsList = loadRes.list
						// this.pageNum = loadRes.pageNo
						// if (this.goodsList.length == res.total) {
						// 	this.isGet = false
						// }
						
						this.goodsList = res.rows
					}
				})
			}
		},
		
		toPickupDetail({paycode,isout}){
			if(!(paycode && isout=='0'))return
			this.$goTo('/pages/yuncang/pickupDetail?paycode=' + paycode)
		}
	}
}
</script>

<style lang="scss">
	.tabs{
		.tab{
			font-size: 32rpx;
			&.on{
				color: red;
			}
		}
	}
</style>
